<template>
	<view>
		<u-navbar :title="type=='add'?$t('cuisine.navAdd'):$t('cuisine.navEdit')" placeholder :autoBack="true" bgColor="#fff"></u-navbar>
		<view class="content">
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('cuisine.input_6')}}</view>
			</view>
			<picker mode="selector" :range="classifyList" @change="onChange" :range-key="language == 'zh' ? 'name' : 'name_copy'">
				<view class="input">
					<u--input disabled disabledColor="#fff" :placeholder="$t('cuisine.searchInput_6')" :adjustPosition="false" border="none" v-model="classifyName"></u--input>
				</view>
			</picker>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('cuisine.input_1')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('cuisine.searchInput_1')" :adjustPosition="false" border="none" v-model="form.title"></u--input>
			</view>
			<view class="title">
				<!-- <view class="xing">*</view> -->
				<view>{{$t('cuisine.input_7')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('cuisine.searchInput_7')" :adjustPosition="false" border="none" v-model="form.title_copy"></u--input>
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('cuisine.input_8')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('cuisine.searchInput_8')" type="digit" :adjustPosition="false" border="none" v-model="form.market_price"></u--input>
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('cuisine.input_9')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('cuisine.searchInput_9')" type="digit" :adjustPosition="false" border="none" v-model="form.price"></u--input>
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('cuisine.input_2')}}</view>
			</view>
			<image class="image" mode="aspectFill" @click="uploadImage" :src="form.image? imgUrl+form.image :'/static/image/merchant_3.png'"></image>
			<u-button :text="$t('cuisine.submitBtn')" v-if="type == 'add'" shape="circle" @click="addCuisine" :customStyle="btnStyle"></u-button>
			<u-button :text="$t('cuisine.editButton')" v-else shape="circle" @click="editCuisine" :customStyle="btnStyle"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import graceChecker from '@/mixins/formVerify.js'
	export default {
		data() {
			return {
				imgUrl:this.$DOMAIN_URL,
				classifyList:[],
				classifyName:"",
				btnStyle: {
					background: "#FFC100",
					border: "none",
					height: "80rpx",
					color:"#fff",
					width:"90%",
					margin:"40px auto"
				},
				form:{
					category_id:0, //商铺类目 (不用传)
					shop_category_id:"",//分类id
					title:"",//菜品名字
					title_copy:"",//菜品名字(维语)
					image:"",//图片
					images:"",//图片组 (不用传)
					description:"",//菜品描述 (不用传)
					description_copy:"",//菜品描述维语(不用传)
					market_price:"",//市场价(原价)
					price:"",//价格 (折扣价)
					content:"",//内容(不用传)
					content_copy:"",//内容维语(不用传)
				},
				rule:{
					shop_category_id:{
						type: String,
						required: true,
						message: "请选择菜品分类"
					},
					title:{
						type: String,
						required: true,
						message: "请输入菜品名字"
					},
					title_copy:{
						type: String,
						required: false,
						message: "请输入菜品名字(维语)"
					},
					market_price:{
						type: String,
						required: true,
						message: "请输入菜品市场价"
					},
					price:{
						type: String,
						required: true,
						message: "请输入菜品价格"
					},
					image:{
						type: String,
						required: true,
						message: "请上传菜品图片"
					},
				},
				type:"",
				item:{}
			};
		},
		onLoad(event) {
			this.type = event.type 
			if(this.type == 'edit'){
				this.form.id = event.id
				this.getDetail()
			}
			this.getClassify()
		},
		computed: {
			language() {
				return this._i18n.locale
			}
		},
		methods:{
			getDetail(){
				this.$http.get('wanlshop/shop/editgoods',{
					id: this.form.id
				}).then(res=>{
					if(res.code == 1){
						this.form.shop_category_id = res.data.category.id
						this.language == 'zh' ? this.classifyName = res.data.category.name :this.classifyName = res.data.category.name_copy 
						this.form.title = res.data.title
						this.form.title_copy = res.data.title_copy
						this.form.market_price = res.data.market_price
						this.form.price = res.data.price
						this.form.image = res.data.image
					}
				})
			},
			getClassify(){
				this.classifyList = []
				this.$http.get('wanlshop/shop/addGoods').then(res=>{
					if(res.code == 1){
						res.data.forEach(item=>{
							this.classifyList.push(item)
						})
					}
				})
			},
			onChange(event){
				this.form.shop_category_id = this.classifyList[event.detail.value].id
				this.language == 'zh' ? this.classifyName = this.classifyList[event.detail.value].name : this.classifyName = this.classifyList[event.detail.value].name_copy
			},
			// 编辑菜品
			editCuisine(){
				let transit = graceChecker.RuleValidation(this.form, this.rule);
				if(transit){
					uni.showLoading({
						title: "修改中...",
						mask:true
					})
					this.$http.post('wanlshop/shop/editgoods', this.form).then(res => {
						uni.hideLoading()
						if (res.code == 1) {  
							setTimeout(() => {
								this.$refs.uToast.show({
									type: 'default',
									message: "修改成功",
									duration: 1000,
									complete() {
										uni.$emit("updateCuisine")
										uni.navigateBack()
									}
								})
							}, 150)
						}
					})
				}
			},
			// 添加菜品
			addCuisine(){
				let transit = graceChecker.RuleValidation(this.form, this.rule);
				if(transit){
					uni.showLoading({
						title: "添加中...",
						mask:true
					})
					this.$http.post('wanlshop/shop/addGoods', this.form).then(res => {
						uni.hideLoading()
						if (res.code == 1) {  
							setTimeout(() => {
								this.$refs.uToast.show({
									type: 'default',
									message: "添加成功",
									duration: 1000,
									complete() {
										uni.$emit("updateCuisine")
										uni.navigateBack()
									}
								})
							}, 150)
						}
					})
				}
			},
			uploadImage(){
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: "加载中...",
							mask:true
						})
						uni.uploadFile({
							url: this.$IMG_URL + 'common/upload',
							filePath: tempFilePaths[0],
							header: {
								token: uni.getStorageSync('token')
							},
							name: 'file',
							success: (uploadFileRes) => {
								uni.hideLoading()
								const res = JSON.parse(uploadFileRes.data)
								if (res.code == 1) {
									this.form.image = res.data.url 
								}
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
 .content{
	 padding: 24rpx;
	 .title {
	 	display: flex;
	 	color: rgba(33, 33, 33, 1);
	 	font-size: 30rpx;
	 	margin-bottom: 28rpx;
	 
	 	.xing {
	 		color: rgba(255, 48, 48, 1);
	 		font-size: 32rpx;
	 		margin-right: 10rpx;
	 	}
	 }
	 .input {
	 	border: 1px solid rgba(227, 229, 232, 1);
	 	border-radius: 10rpx;
	 	padding: 20rpx;
	 	margin-bottom: 40rpx;
	 }
	 .image {
	 	width: 320rpx;
	 	height: 196rpx;
	 	margin-bottom: 40rpx;
	 }
 }
</style>
